<template>
  <div style="width: 100%">
    <h4 class="boardName" @click="gotoThat">
      状态统计
      <a-icon type="right" />
    </h4>
    <div class=" lightBox">
      <!--              环形图-->
      <div style="width: 60%;float: left;">
        <pieCharts :chartColor="alarmStatues" :chartData="pieData" />
      </div>
      <!--              环形图图例-->
      <div style="width: 40%;float: left;" class="pielegendbox">
        <p class="pielegend" v-for="(item, index) in pieData" :key="index">
          <span class="quan" :style="{ 'border-color': alarmStatues[index] }"></span>
          <span class="name">{{ item.name }}</span>
          <span class="value">{{ item.string }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import pieCharts from '../../../echartsCom/pieCharts.vue';
export default {
  name: 'index',

  components: {
    pieCharts,
  },
  props: {
    alarmStatues: {
      type: Array,
      default: () => ['#3FC529', '#FBC225', '#E74629', '#E2E7EE'],
    },
    SumStateTimeList: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    SumStateTimeList(val) {
      this.SumStateTime(val);
    },
  },
  data() {
    let moment = this.$Moment;
    return {
      userName: '',
      name: '',
      role: '',
      compId: '',
      dateType: 1,
      pieData: [],
    };
  },
  methods: {
    gotoThat() {
      this.$store.commit('board/HeadNavType', 2);
      localStorage.setItem('navType', 2);
      this.$router.push('/statistics');
    },
    SumStateTime(val) {
      this.pieData = [
        { value: (val.running * 100).toFixed(2), name: '运行', string: val.runningStr },
        { value: (val.stop * 100).toFixed(2), name: '待机', string: val.stopStr },
        // { value: (val.alarm * 100).toFixed(2), name: '报警', string: val.alarmStr },
        { value: (val.offline * 100).toFixed(2), name: '离线', string: val.offlineStr },
      ];
    },
  },
};
</script>

<style scoped lang="less">
@import '../../light.less';
</style>
